<template lang="pug">
  router-link.good-item(:to="{name: 'GoodDetail', params: {id: good.id}}")
    .good-item-img
      img(:src="good.thumbnail")
    .good-item-info
      .good-title
        img(:src="platformIcon(good)", :class="platformIconClass(good)")
        | {{good.name}}
      .good-item-detail(align="flex-end",justify="space-between",:gutter="0")
        .good-item-tips
          | 销量: {{good.month_sales}}
          br
          | 现价:￥{{moneyNumber(good.price)}}
          .discount_price
            | 券后价:&nbsp;
            font.price {{moneyNumber(good.discount_price)}}
        .get-coupon-btn
          .coupon-title 马上领券
          .coupon-tips 立减{{couponAmount(good)}}元
</template>

<script>
import taobaoIcon from '../assets/icons/taobao.svg'
import tmallIcon from '../assets/icons/tmall.svg'
export default {
  name: 'GoodItem',
  props: ['good'],
  methods: {
    couponAmount (good) {
      return (good.price - good.discount_price).toFixed(1)
    },
    moneyNumber (number) {
      return number.toFixed(2)
    },
    platformIcon (good) {
      if (good.is_tmall) {
        return tmallIcon
      } else {
        return taobaoIcon
      }
    },
    platformIconClass (good) {
      if (good.is_tmall) {
        return 'tmall'
      } else {
        return 'taobao'
      }
    }
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';
.good-item
  background: $white
  padding: 10px !important
  text-decoration: none
  margin-bottom: 15px
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: stretch
  .good-item-img
    width: 120px
    height: 120px
    img
      height: 100% !important
      width: 100% !important
  .good-item-info
    flex: 1 1
    padding-left: 10px
    display: flex
    flex-direction: column
    justify-content: space-between
    align-items: stretch
    .good-title
      color: $black-8
      font-size: 1em
      overflow: hidden
      text-overflow: ellipsis
      display: -webkit-box
      -webkit-line-clamp: 2
      -webkit-box-orient: vertical
      img
        height: 14px
      img.tmall
        margin-right: 7px
    .good-item-detail
      flex: 1 1
      margin-top: 0px !important
      padding-top: 3px
      display: flex
      flex-direction: row
      justify-content: space-between
      align-items: flex-end
      .good-item-tips
        font-size: .7em
        color: $gray
        padding-top: 5px          
        .discount_price
          padding-top: 3px
          .price
            font-size: 1.6em
            color: $red
      .get-coupon-btn
        border: 1px $light-red solid
        text-align: center
        overflow: hidden
        border-radius: 5px
        font-size: .6em
        max-width: 100px
        min-width: 80px
        .coupon-title
          background: $light-red
          color: $white
          padding: 3px
        .coupon-tips
          color: $gray
          padding: 3px
</style>
